<template>
  <div class="Word">
    <div style="text-align: center">
      <h3 style="margin: 20px">
        演示：模拟后台填充数据到Word模板生成文件的效果
      </h3>
      <div style="width: 650px; margin: 0 auto; font-size: 14px">
        <p style="text-align: left">
          演示内容：<br />
          &nbsp;&nbsp;&nbsp;&nbsp;本示例演示了调用FileMaker对象在客户端动态生成Word文件并自动保存到服务器上，却不显示打开文件界面的功能，模拟了直接在服务器端填充数据到Word模板生成文件的效果。
        </p>
        <p style="text-align: left">
          操作说明：<br />
          &nbsp;&nbsp;&nbsp;&nbsp;1.
          点击“生成Word文件”按钮，执行动态填充数据到荣誉证书模板“template.doc”的程序，生成一份真正的荣誉证书文件。<br />
          &nbsp;&nbsp;&nbsp;&nbsp;2.
          生成完毕后，即可在“FileMakerSingle/doc”目录下看到生成的Word文件：maker.doc。
        </p>
      </div>
      <input
        id="Button1"
        type="button"
        value="生成Word文件"
        @click="ConvertFile()"
      />
      <div id="progressBarContainer">
        <div id="progressBar"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Word",
  data() {
    return {};
  },
  methods: {
    ConvertFile() {
      document.getElementById("Button1").disabled = true;
      //注意：CallFileMaker是pageoffice.js中封装好的方法，专门供调用FileMakerCtrl生成文件使用
      CallFileMaker({
        //url：指向服务器端FileMakerCtrl生成文件的controller地址
        url: "/api/FileMakerSingle/FileMakerSingle",
        success: function () {
          console.log("completed successfully.");
          setProgress(100);
        },
        progress: function (pos) {
          console.log("running " + pos + "%");
          setProgress(pos);
        },
        error: function (msg) {
          console.log("error occurred: " + msg);
        },
      });
    },
    setProgress(percent) {
      var progressBar = document.getElementById("progressBar");
      progressBar.style.width = percent + "%";
      progressBar.innerText = percent + "%";
    },
  },
  mounted: function () {
    //将vue中的方法赋值给window
    //注意：这里必须将setProgress()这个方法挂载到windows对象上，否则CallFileMaker中将没法调用此方法
    window.setProgress = this.setProgress;
  },
};
</script>
<style scoped>
h3 {
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}
#progressBarContainer {
  width: 500px;
  background-color: #e0e0e0;
  border-radius: 5px;
  padding: 3px;
  margin: 10px auto;
}

#progressBar {
  height: 20px;
  width: 0%;
  background-color: #76b900;
  border-radius: 5px;
  text-align: center;
  line-height: 20px; /* 使文字垂直居中 */
  color: white;
}
</style>